<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>纯CSS背景渐变动画</title>

		<style>
			body {
				margin: 0;
				width: 100%;
				height: 100vh;
				font-family: "Exo", sans-serif;
				color: #fff;
				background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
				background-size: 400% 400%;
				animation: gradientBG 15s ease infinite;
			}

			@keyframes gradientBG {
				0% {
					background-position: 0% 50%;
				}

				50% {
					background-position: 100% 50%;
				}

				100% {
					background-position: 0% 50%;
				}
			}

			.container {
				width: 100%;
				position: absolute;
				top: 35%;
				text-align: center;
			}

			h1 {
				font-weight: 300;
			}

			h3 {
				color: #eee;
				font-weight: 100;
			}

			h5 {
				color: #eee;
				font-weight: 300;
			}

			a,
			a:hover {
				text-decoration: none;
				color: #ddd;
			}
		</style>

	</head>
	<body>

		<div class="container">
			<h1>CSS3背景渐变动画</h1>
		</div>

		<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
			<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
			<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
		</div>
	</body>
</html>
